<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script
      type="text/javascript"
      src="https://fastly.jsdelivr.net/npm/jquery"
    ></script>
    <script
      type="text/javascript"
      src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"
    ></script>

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};
      var ROOT_PATH = "";
      var option;

      myChart.showLoading();
      $.get(ROOT_PATH + "sankey.json", function (data) {
        myChart.hideLoading();
        myChart.setOption(
          (option = {
            title: {
              text: "Sankey Diagram",
            },
            tooltip: {
              trigger: "item",
              triggerOn: "mousemove",
            },
            series: [
              {
                type: "sankey",
                data: data.nodes,
                links: data.links,
                emphasis: {
                  focus: "adjacency",
                },
                lineStyle: {
                  color: "gradient",
                  curveness: 0.5,
                },
              },
            ],
          })
        );
      });

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
